<!DOCTYPE html>
<!-- <!DOCTYPE html> -->
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
    <title>web-console</title>
    <style>
      /* CSSImportRule */
      @import url('style_import1.css');

      /* CSSStyleRule */
      #element {
        color: red;
        /* 样式缩写形式 */
        font: 1em "Fira Sans", sans-serif;
        font-size: 15px;
        font-weight: bold;
        /* 样式缩写形式 */
        border: 1px dotted blue;
        border-left: 1px solid red;
        padding: 5px;
        padding-left: 10px;
        /* 不同形式的颜色写法 */
        color: black;
        color: rgb(0, 0, 0);
        color: #000;
        background-color: #000;
        border-bottom-color: #000;
        border-top-color: #000;
        border-right-color: #000;
        border-left-color: #000;
        border-color:#F00;
        caret-color: #000;
        outline-color: #000;
        text-decoration-color: #000;
        background: #000;
        color:inherit;
        color: darkmagenta
;
      }
      /* 测试分组选择器 */
      .xyz, .zyx, #element, .other {
        border: 1px solid red;
      }
      /* 测试宿主页和浏览器设置默认样式 */
      div, span, p {
        /* 会覆盖 conole 面板 %c 占位符的设置的继承样式 */
        /* color: black; */
      }

      /* CSSKeyframesRule */
      @keyframes out {
        0% { }
        100% { opacity: 0; }
      }

      /* parent element style */
      #parent {
        /* 可继承 */
        color: gold;
        /* 不可继承 */
        border-right-width: 1px;
      }

      #parent2 {
        color: brown;
        /* 不可继承 */
        border-right-width: 2px;
      }

      /* 测试盒模型 */
      .box-model {
        display: none;
        margin: 99999999999999999999px;
        border: 88888888888888888888px solid red;
        padding: 77777777777777777777px;
        width: 666px;
        height: 666px;
      }
      .box-model2 {
        display: none;
        position: relative;
        left: 10px;
        top: 20px;
        margin-left: 1px;
        padding-left: 2px;
        border-left: 3px;
        width: -10px;
        height: 0px;
      }
      .box-model3 {
        display: none;
        position: absolute;
        left: 10px;
        top: 20px;
        width: 0px;
        height: 10px;
      }
    </style>
    <link rel="stylesheet" href="style_link.css">
    <link rel="stylesheet" href="./mint-ui.min.css">
    <style>
      #app {
        height: 100%;
        overflow-y: scroll;
      }

      #app .mint-button {
        width: 100%;
        margin-bottom: 15px;
      }
    </style>
    <link rel="stylesheet" href="./HelloPlugin.css">
  </head>
  <body>
    <!-- 测试 element 面板 -->
    <div id="parent" class="a b" style="color: red">
      <div id="parent2" class="c d" style="color: red">
        <div id="element"
          class="xyz zyx"
          style="display: none"
          data-a="a"
          >
          <div> 
            <!-- 测试不同类型节点 -->
              hello 
              world
            <span>b</span>
            <!-- 无内容标签测试 -->
            <input>
            <input/>
            <input></input>
          </div>
          1
          <div>
            2
            <div>
              3
              <div>
                4
                <div>
                  5
                  <div>
                    6
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 测试盒模型 -->
      <div class="box-model"></div>
      <div class="box-model2"></div>
      <div class="box-model3"></div>
    </div>

    <!-- import Vue before Mint UI -->
    <script src="./vue.js"></script>
    <div id="app">
      <h1>WebConsole</h1>
      <div v-if="isDev">
        <h2>Console Test</h2>
        <mt-button type="primary" @click="$console.testLogLevel">打印不同级别日志</mt-button>
        <mt-button type="primary" @click="$console.testLogParams()">打印多参数</mt-button>
        <mt-button type="primary" @click="$console.testFormat()">打印格式化</mt-button>
        <mt-button type="primary" @click="$console.testObject()">打印对象</mt-button>
        <mt-button type="primary" @click="$console.testException()">触发异常</mt-button>
        <h2>Network Test</h2>
        <mt-button type="primary" @click="$network.testXMLHttpRequest()">测试 XHR 请求</mt-button>
        <mt-button type="primary" @click="$network.testFetch()">测试 fetch 请求</mt-button>
        <mt-button type="primary" @click="$network.testHTTPStatus()">测试 HTTP 状态码</mt-button>
        <mt-button type="primary" @click="$network.testResponseData()">测试响应数据</mt-button>
        <h3>query string & body</h3>
        <mt-button type="primary" @click="$network.testRequestParams('get')">get</mt-button>
        <mt-button type="primary" @click="$network.testRequestParams('post:raw')">post:raw</mt-button>
        <mt-button type="primary" @click="$network.testRequestParams('post:raw:text')">post:raw:text</mt-button>
        <mt-button type="primary" @click="$network.testRequestParams('post:raw:json')">post:raw:json</mt-button>
        <mt-button type="primary" @click="$network.testRequestParams('post:form-data')">post:form-data</mt-button>
        <mt-button type="primary" @click="$network.testRequestParams('post:x-www-form-urlencoded')">post:x-www-form-urlencoded</mt-button>

        <h2>Application Test</h2>
        <mt-button type="primary" @click="$application.testWriteCookie(1000)">测试 Cookie</mt-button>
        <mt-button type="primary" @click="$application.testWriteLocalStorage(1000)">测试 LocalStorage</mt-button>
        <mt-button type="primary" @click="$application.testWriteSessionStorage(1000)">测试 SessionStorage</mt-button>
        <h2>Other</h2>
        <mt-button type="primary" @click="performanceTest(50)">日志性能测试</mt-button>
        <mt-button type="primary" @click="pluginTest">测试插件</mt-button>
      </div>
      <div v-else>
        <mt-button type="primary" @click="onClickLog('level_log')">普通日志(log)</mt-button>
        <mt-button type="primary" @click="onClickLog('level_info')">信息日志(info)</mt-button>
        <mt-button type="primary" @click="onClickLog('level_debug')">调试日志(debug)</mt-button>
        <mt-button type="primary" @click="onClickLog('level_warn')">警告日志(warn)</mt-button>
        <mt-button type="danger" @click="onClickLog('level_error')">报错日志(error)</mt-button>

        <h2></h2>
        <mt-button type="primary" @click="onClickLog('object')">打印对象</mt-button>
        <mt-button type="danger" @click="onClickLog('error')">打印错误</mt-button>

        <h2></h2>
        <mt-button type="primary" @click="onClickRequest('xhr')">发起 XMLHttpRequest 请求</mt-button>
        <mt-button type="primary" @click="onClickRequest('fetch')">发起 fetch 请求</mt-button>
      </div>
      <p>
        <mt-switch v-model='isDev'>切换</mt-switch>
      </p>
    </div>
    <!-- import JavaScript -->
    <script src="./mint-ui.min.js"></script>
    <script src="./test_console.js"></script>
    <script src="./test_network.js"></script>
    <script src="./test_application.js"></script>
    <script src="./test_plugin.js"></script>
    <script type="text/javascript">
      var isDev = !!localStorage.getItem('web-console:isDev')
      new Vue({
        el: "#app",
        data: function() {
          return {
            isDev: isDev
          };
        },
        computed: {
          $network () {
            return window.$network
          },
          $console () {
            return window.$console
          },
          $application () {
            return window.$application
          }
        },
        mounted: function() {
          this.launchWebConsole();
        },
        methods: {
          pluginTest () {
            localStorage.setItem('plugin', 'enable')
            location.reload()
          },
          performanceTest (n) {
            if (n <= 0) return
            this.$console.testFormat()
            // this.$network.testHTTPStatus()
            var that = this
            that.performanceTest(n - 1)
            // setTimeout(function () {
            //   that.performanceTest(n - 1)
            // }, 10)
          },
          launchWebConsole: function() {
            var self = this;
            if (window.WebConsole) {
              // 测试 web-console 加载完毕前的日志输出
              // console.error(new Error('hello'))

              // 测试日志数量
              // new Array(11).fill(0).forEach((v, i) => console.log(i))
              if (localStorage.getItem('plugin') === 'enable') {
                window.$plugins.forEach(plugin => WebConsole.use(plugin))
              }

              window.webConsole = new WebConsole({
                activeTab: isDev ? 'network' : 'console',
                panelVisible: isDev ? true : false,
                entryStyle: 'button'
              });
              if (isDev) {
                // this.$network.testRequestParams()
              }
              // self.$network.testFetchApi()
              // this.$console.testFormat()
              // this.$network.testHTTPStatus()
              // this.$network.testRequestParams()
              // this.$network.testResponseData()
              // this.$console.testIntervalLog()
            } else {
              setTimeout(function() {
                self.launchWebConsole();
              }, 200);
            }
          },
          onClickLog: function(type) {
            switch (type) {
              case "level_log":
                console.log("log");
                break;
              case "level_info":
                console.info("info");
                break;
              case "level_debug":
                console.debug("debug");
                break;
              case "level_warn":
                console.warn("warn");
                break;
              case "level_error":
                console.error("error");
                break;
              case "object":
                console.log({a: 100, b: [1, 2], c: true});
                break;
              case "error":
                console.error(new Error('你触发了一个错误'));
                break;
            }
            this.$toast({message: '已打印，请打开 Console 面板查看'})
          },
          onClickRequest(type) {
            var nodeDocsApi = "https://nodejs.org/dist/latest-v8.x/docs/api/index.json";
            if (type === 'xhr') {
              var xhr = new window.XMLHttpRequest();
              xhr.open("GET", nodeDocsApi);
              xhr.send();
              this.$toast({message: '已发送，请打开 Network 面板查看'})
            } else if (type === 'fetch') {
              if (typeof window.fetch === 'function') {
                window.fetch(nodeDocsApi)
                this.$toast({message: '已发送，请打开 Network 面板查看'})
              } else {
                this.$toast({message: '您的浏览器不支持 fetch 请求'})
              }
            } else {

            }
          }
        }
      });

      function ajax(options) {
        options = options || {};
        var url = options.url;
        var method = options.method || "GET";

        var xhr = new window.XMLHttpRequest();
        xhr.onreadystatechange = function() {
          console.log("readyState:", this.readyState);
        };
        xhr.open(method, url);
        xhr.send();
      }

      // 测试log格式化输出
      function testLogFormat(value, format) {
        console.log("console.log(%" + format + ", %s)", JSON.stringify(value));
        console.log(format, value);
      }
    </script>
    <!-- <script src="https://unpkg.com/@whinc/web-console"></script> -->
    <!-- <script src="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script> -->
    <script>
      if (window.VConsole) {
        window._vConsole = new window.VConsole();
      }
    </script>
    <!-- built files will be auto injected -->
  </body>
</html>
